Bonian agent by 7t4o · Pull Request #309226 · microsoft/vscode

7t4o · 2026-04-11T19:51:18Z

No description provided.

vs-code-engineering · 2026-04-11T19:52:03Z

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@bpasero

Matched files:

src/vs/code/electron-browser/workbench/workbench-dev.html
src/vs/code/electron-browser/workbench/workbench.html
src/vs/platform/utilityProcess/electron-main/utilityProcess.ts

@deepak1556

Matched files:

src/vs/code/electron-browser/workbench/workbench-dev.html
src/vs/code/electron-browser/workbench/workbench.html

Copilot

Pull request overview

This PR introduces two new workbench contributions—a Monaco Input auxiliary-bar view (with a Python “run in terminal” button) and a Bonian Agent sidebar view (webview-driven image upload / pipeline)—and wires both into the core workbench entrypoint. It also includes unrelated changes to Getting Started UI strings, CSP, build tooling, and top-level dependencies.

Changes:

Register new monacoInput and bonianAgent workbench contributions and load them from workbench.common.main.ts.
Add UI + controller logic for the Bonian Agent webview pipeline and workspace file generation.
Apply broad repo/tooling updates (CSP connect-src exception, build pipeline gulp options, and multiple dependency version bumps), plus modify Getting Started titles.

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 21 comments.

Show a summary per file

File	Description
src/vs/workbench/workbench.common.main.ts	Loads the new Monaco Input and Bonian Agent contributions into the core workbench.
src/vs/workbench/contrib/welcomeGettingStarted/common/gettingStartedContent.ts	Alters Welcome / Getting Started titles (now hard-coded and non-localized).
src/vs/workbench/contrib/monacoInput/browser/monacoInputView.ts	Implements a Monaco-backed editor view with a “Run Python” terminal action.
src/vs/workbench/contrib/monacoInput/browser/monacoInput.contribution.ts	Registers the Monaco Input container/view and title actions (Clear/Save).
src/vs/workbench/contrib/monacoInput/browser/media/monacoInput.css	Adds styling for the Monaco Input view toolbar/editor container.
src/vs/workbench/contrib/bonianAgent/browser/bonianAgentViewPane.ts	Implements the Bonian Agent viewpane using an overlay webview and inline HTML/script.
src/vs/workbench/contrib/bonianAgent/browser/bonianAgentController.ts	Calls an external vision-to-code service and writes returned files into the workspace.
src/vs/workbench/contrib/bonianAgent/browser/bonianAgent.contribution.ts	Registers the Bonian Agent sidebar container/view and Explorer context action.
src/vs/platform/utilityProcess/electron-main/utilityProcess.ts	Extends the crash reason union type with `memory-eviction`.
src/vs/code/electron-browser/workbench/workbench.html	Expands CSP `connect-src` to allow a hard-coded external HTTP origin.
src/vs/code/electron-browser/workbench/workbench-dev.html	Same CSP expansion for dev workbench.
package.json	Adds `extensionAllowedProposedApi` and bumps multiple core dependencies/tooling versions.
build/lib/compilation.ts	Changes `gulp.src` options (adds `encoding: false` with an `as any` cast).
build/lib/compilation.js	Mirrors the compilation pipeline change in the built JS.
MONACO_INPUT_TUTORIAL.md	Adds a large tutorial document at repo root.
MONACO_INPUT_STEP_BY_STEP_TUTORIAL.md	Adds a second, even larger tutorial document at repo root.

Copilot · 2026-04-11T19:58:31Z

src/vs/workbench/contrib/monacoInput/browser/monacoInputView.ts

+			title: 'Run Python Code'
+		});
+		runButton.textContent = '🐍 Run Python';


The run button label/title are user-facing strings but are not localized (and include an emoji). Please use nls.localize(...) for user-visible UI strings and follow existing label conventions.

Suggested change

title: 'Run Python Code'

});

runButton.textContent = '🐍 Run Python';

title: nls.localize('monacoInput.runPythonButtonTitle', "Run Python")

});

runButton.textContent = nls.localize('monacoInput.runPythonButtonLabel', "Run Python");

Copilot · 2026-04-11T19:58:31Z

src/vs/workbench/contrib/monacoInput/browser/monacoInputView.ts

+	private runPython(): void {
+		const code = this._editor?.getValue() || '';
+		if (!code.trim()) {
+			return;
+		}
+
+		// Create a unique temp file name
+		const tempFileName = `vscode_monaco_${Date.now()}.py`;
+		const tempFilePath = `/tmp/${tempFileName}`;
+
+		// Create terminal and execute the script
+		this.commandService.executeCommand('workbench.action.terminal.new');
+
+		// Hide command completely, only show clean output
+		setTimeout(() => {
+			// Clear screen and execute silently
+			const cleanCommand = `clear; cat > ${tempFilePath} << 'EOF' 2>/dev/null\n${code}\nEOF\necho "🐍 Running Python..."\npython3 ${tempFilePath} 2>&1\nrm ${tempFilePath} 2>/dev/null`;
+
+			this.commandService.executeCommand('workbench.action.terminal.sendSequence', {
+				text: cleanCommand + '\n'
+			});
+		}, 150);


runPython() builds a shell script by interpolating arbitrary editor content into a heredoc and sends it to the terminal. This is not cross-platform (/tmp, clear, python3) and is vulnerable to heredoc breakouts (e.g. code containing EOF) causing unintended shell execution. Please rework to a safe, OS-agnostic approach (e.g. write via IFileService to a temp location from VS Code services, properly quote paths, and execute Python via a dedicated task/terminal API rather than injecting raw shell).

Copilot · 2026-04-11T19:58:32Z

src/vs/workbench/contrib/monacoInput/browser/monacoInput.contribution.ts

+registerAction2(class SaveMonacoInputAction extends Action2 {
+	constructor() {
+		super({
+			id: 'monacoInput.save',
+			title: { value: nls.localize('monacoInput.save', "Save Content"), original: 'Save Content' },
+			icon: Codicon.save,
+			menu: {
+				id: MenuId.ViewTitle,
+				when: ContextKeyExpr.equals('view', MonacoInputViewPane.ID),
+				group: 'navigation',
+				order: 2
+			}
+		});
+	}
+
+	async run(accessor: ServicesAccessor): Promise<void> {
+		const viewsService = accessor.get(IViewsService);
+		const view = viewsService.getActiveViewWithId(MonacoInputViewPane.ID) as MonacoInputViewPane | null;
+
+		if (view) {
+			const content = view.getValue();
+			// Here you would implement save logic
+			console.log('Saving content:', content);
+		}
+	}
+});


The Save action currently only logs to the developer console. In product code this should either implement actual save behavior (e.g. save to a user-chosen file / workspace file via IFileService) or be removed until implemented.

Suggested change

registerAction2(class SaveMonacoInputAction extends Action2 {

constructor() {

super({

id: 'monacoInput.save',

title: { value: nls.localize('monacoInput.save', "Save Content"), original: 'Save Content' },

icon: Codicon.save,

menu: {

id: MenuId.ViewTitle,

when: ContextKeyExpr.equals('view', MonacoInputViewPane.ID),

group: 'navigation',

order: 2

}

});

}

async run(accessor: ServicesAccessor): Promise<void> {

const viewsService = accessor.get(IViewsService);

const view = viewsService.getActiveViewWithId(MonacoInputViewPane.ID) as MonacoInputViewPane | null;

if (view) {

const content = view.getValue();

// Here you would implement save logic

console.log('Saving content:', content);

}

}

});

Copilot · 2026-04-11T19:58:32Z

src/vs/code/electron-browser/workbench/workbench.html

 					'self'
 					https:
 					ws:
+					http://144.91.70.138:8000


This adds a hard-coded external HTTP origin to connect-src in the workbench CSP. Relaxing CSP like this is a security risk and should not be done for a feature-specific endpoint; requests should go through VS Code’s existing networking/proxy infrastructure and be gated by configuration/allowed domain policies.

Suggested change

http://144.91.70.138:8000

Copilot · 2026-04-11T19:58:32Z

src/vs/code/electron-browser/workbench/workbench-dev.html

 					'self'
 					https:
 					ws:
+					http://144.91.70.138:8000


This adds a hard-coded external HTTP origin to connect-src in the dev workbench CSP. Please avoid widening CSP for a fixed IP/port; use the standard request/proxy pipeline and configurable endpoints instead.

Suggested change

http://144.91.70.138:8000

Copilot · 2026-04-11T19:58:35Z

package.json

    "glob": "^5.0.13",
-    "gulp": "^4.0.0",
+    "gulp": "^5.0.1",
    "gulp-azure-storage": "^0.12.1",


This PR bumps core build/runtime dependencies (e.g. Electron, gulp, copy-webpack-plugin, sqlite3) and changes some from pinned versions to caret ranges. These are high-risk, repo-wide changes and appear unrelated to the feature code; please split dependency/toolchain upgrades into a dedicated PR with justification and validation notes.

Suggested change

"gulp-azure-storage": "^0.12.1",

"gulp-azure-storage": "0.12.1",

Copilot · 2026-04-11T19:58:35Z

build/lib/compilation.ts


 		const transpile = createCompile(src, { build: false, emitError: true, transpileOnly: { esbuild: !!esbuild }, preserveEnglish: false });
-		const srcPipe = gulp.src(`${src}/**`, { base: `${src}` });
+		const srcPipe = gulp.src(`${src}/**`, { base: `${src}`, encoding: false } as any);


Casting the gulp.src options object to any hides type incompatibilities and makes this build pipeline harder to maintain. Please avoid as any here by updating the typings/options properly (or use a supported option such as buffer: true/false if the intent is to control file contents type).

Suggested change

const srcPipe = gulp.src(`${src}/**`, { base: `${src}`, encoding: false } as any);

const srcPipe = gulp.src(`${src}/**`, { base: `${src}`, buffer: true });

Copilot · 2026-04-11T19:58:36Z

MONACO_INPUT_TUTORIAL.md

+# 🚀 Building a MonacoInput View Pane in VS Code: Complete Tutorial
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Prerequisites](#prerequisites)
+3. [Architecture Understanding](#architecture-understanding)
+4. [Step-by-Step Implementation](#step-by-step-implementation)
+5. [Advanced Features](#advanced-features)
+6. [Testing & Debugging](#testing--debugging)
+7. [Best Practices](#best-practices)
+8. [Troubleshooting](#troubleshooting)
+
+---
+
+## Overview
+
+This tutorial will guide you through creating a **MonacoInput** feature in VS Code - a custom view pane that provides a Monaco editor with Python execution capabilities. By the end of this tutorial, you'll have:
+
+- ✅ A custom view pane in the auxiliary sidebar
+- ✅ Monaco editor with Python syntax highlighting
+- ✅ Python code execution via terminal integration
+- ✅ Custom toolbar with run, clear, and save buttons
+- ✅ Proper VS Code theming and styling
+- ✅ Full integration with VS Code's service architecture
+
+### What You'll Build
+
+```
+┌─ Auxiliary Sidebar ─────────────────┐
+│ 📝 Monaco Input                     │
+├─────────────────────────────────────┤
+│ [🐍 Run Python] [🗑️ Clear] [💾 Save] │
+├─────────────────────────────────────┤
+│ # Type your Python code here       │
+│ print("Hello from Python!")        │
+│                                     │
+│ [Monaco Editor with Python syntax] │
+│                                     │
+└─────────────────────────────────────┘
+```
+
+---
+
+## Prerequisites
+
+### Technical Requirements
+
+- 📚 **TypeScript**: Advanced knowledge required
+- 🏗️ **VS Code Architecture**: Understanding of services, dependency injection


This documentation file adds ~1k lines of tutorial content (including emoji-heavy headings) at the repository root. Unless this is intended to be published/maintained as part of the project’s official docs, it will add significant maintenance and repo-weight; consider removing it or moving/condensing it into the appropriate docs location.

Suggested change

# 🚀 Building a MonacoInput View Pane in VS Code: Complete Tutorial

## Table of Contents

1. [Overview](#overview)

2. [Prerequisites](#prerequisites)

3. [Architecture Understanding](#architecture-understanding)

4. [Step-by-Step Implementation](#step-by-step-implementation)

5. [Advanced Features](#advanced-features)

6. [Testing & Debugging](#testing--debugging)

7. [Best Practices](#best-practices)

8. [Troubleshooting](#troubleshooting)

---

## Overview

This tutorial will guide you through creating a **MonacoInput** feature in VS Code - a custom view pane that provides a Monaco editor with Python execution capabilities. By the end of this tutorial, you'll have:

- ✅ A custom view pane in the auxiliary sidebar

- ✅ Monaco editor with Python syntax highlighting

- ✅ Python code execution via terminal integration

- ✅ Custom toolbar with run, clear, and save buttons

- ✅ Proper VS Code theming and styling

- ✅ Full integration with VS Code's service architecture

### What You'll Build

```

┌─ Auxiliary Sidebar ─────────────────┐

│ 📝 Monaco Input │

├─────────────────────────────────────┤

│ [🐍 Run Python] [🗑️ Clear] [💾 Save] │

├─────────────────────────────────────┤

│ # Type your Python code here │

│ print("Hello from Python!") │

│ │

│ [Monaco Editor with Python syntax] │

│ │

└─────────────────────────────────────┘

```

---

## Prerequisites

### Technical Requirements

- 📚 **TypeScript**: Advanced knowledge required

- 🏗️ **VS Code Architecture**: Understanding of services, dependency injection

# MonacoInput Notes

This file is intentionally kept brief.

The previous root-level version contained a large tutorial for building a MonacoInput view pane. To reduce maintenance overhead and keep repository-root documentation focused, detailed walkthrough content should live in the appropriate project documentation location instead of here.

## Summary

MonacoInput refers to a custom view-pane concept built around:

- a Monaco editor surface

- language-aware editing behavior

- terminal-backed code execution

- VS Code theming and workbench integration

## Maintenance Note

Keep this file limited to a short overview or pointer. Do not expand it into a long-form tutorial at the repository root.

Copilot · 2026-04-11T19:58:36Z

MONACO_INPUT_STEP_BY_STEP_TUTORIAL.md

+# 🚀 Building MonacoInput in VS Code: Complete Step-by-Step Tutorial
+
+## Table of Contents
+
+1. [Introduction & Concepts](#introduction--concepts)
+2. [Step 1: Create Empty Auxiliary Sidebar](#step-1-create-empty-auxiliary-sidebar)
+3. [Step 2: Add Basic View Pane](#step-2-add-basic-view-pane)
+4. [Step 3: Integrate Monaco Editor](#step-3-integrate-monaco-editor)
+5. [Step 4: Add Python Language Support](#step-4-add-python-language-support)
+6. [Step 5: Create Toolbar with Run Button](#step-5-create-toolbar-with-run-button)
+7. [Step 6: Implement Python Execution](#step-6-implement-python-execution)
+8. [Step 7: Add Custom Actions (Clear & Save)](#step-7-add-custom-actions-clear--save)
+9. [Step 8: Style with CSS](#step-8-style-with-css)
+10. [Step 9: Testing & Debugging](#step-9-testing--debugging)
+
+---
+
+## Introduction & Concepts
+
+### What We're Building
+
+By the end of this tutorial, you'll have a fully functional MonacoInput feature in VS Code that:
+
+- Appears as a panel in the auxiliary sidebar (secondary sidebar)
+- Contains a Monaco editor with Python syntax highlighting
+- Has a toolbar with a "Run Python" button
+- Executes Python code in VS Code's integrated terminal
+- Includes Clear and Save actions in the title bar
+
+### VS Code Architecture Overview
+
+Before we start coding, let's understand VS Code's key concepts:
+
+#### 1. **Dependency Injection System**
+
+VS Code uses dependency injection to provide services to components. Instead of creating services directly, you declare what services you need, and VS Code automatically provides them.
+
+```typescript
+// Instead of this:
+const fileService = new FileService();
+
+// You do this:
+constructor(
+    @IFileService private readonly fileService: IFileService
+) {
+    // fileService is automatically injected
+}
+```
+
+**Why?** This makes code:
+


This second tutorial adds ~2k lines of duplicated step-by-step content at the repository root. Please avoid landing large tutorial artifacts in the product repo unless they are part of an agreed documentation plan; otherwise remove or relocate to the appropriate documentation area.

Suggested change

# 🚀 Building MonacoInput in VS Code: Complete Step-by-Step Tutorial

## Table of Contents

1. [Introduction & Concepts](#introduction--concepts)

2. [Step 1: Create Empty Auxiliary Sidebar](#step-1-create-empty-auxiliary-sidebar)

3. [Step 2: Add Basic View Pane](#step-2-add-basic-view-pane)

4. [Step 3: Integrate Monaco Editor](#step-3-integrate-monaco-editor)

5. [Step 4: Add Python Language Support](#step-4-add-python-language-support)

6. [Step 5: Create Toolbar with Run Button](#step-5-create-toolbar-with-run-button)

7. [Step 6: Implement Python Execution](#step-6-implement-python-execution)

8. [Step 7: Add Custom Actions (Clear & Save)](#step-7-add-custom-actions-clear--save)

9. [Step 8: Style with CSS](#step-8-style-with-css)

10. [Step 9: Testing & Debugging](#step-9-testing--debugging)

---

## Introduction & Concepts

### What We're Building

By the end of this tutorial, you'll have a fully functional MonacoInput feature in VS Code that:

- Appears as a panel in the auxiliary sidebar (secondary sidebar)

- Contains a Monaco editor with Python syntax highlighting

- Has a toolbar with a "Run Python" button

- Executes Python code in VS Code's integrated terminal

- Includes Clear and Save actions in the title bar

### VS Code Architecture Overview

Before we start coding, let's understand VS Code's key concepts:

#### 1. **Dependency Injection System**

VS Code uses dependency injection to provide services to components. Instead of creating services directly, you declare what services you need, and VS Code automatically provides them.

```typescript

// Instead of this:

const fileService = new FileService();

// You do this:

constructor(

@IFileService private readonly fileService: IFileService

) {

// fileService is automatically injected

}

```

**Why?** This makes code:

# MonacoInput Tutorial

This file intentionally does not contain the full step-by-step implementation tutorial.

Large tutorial artifacts should not live at the repository root unless they are part of an agreed documentation plan. Detailed walkthrough content for MonacoInput should be removed from this location or maintained in the appropriate documentation area instead.

Copilot · 2026-04-11T19:58:36Z

src/vs/workbench/workbench.common.main.ts

+// Bonian Agent
+import './contrib/bonianAgent/browser/bonianAgent.contribution.js';


This wires the Bonian Agent contribution into the main workbench unconditionally. Given it enables external network calls and writes generated files into the workspace, it should be gated behind an explicit feature flag/setting (and likely not included in core entrypoints until hardened).

Suggested change

// Bonian Agent

import './contrib/bonianAgent/browser/bonianAgent.contribution.js';

/**

* Returns whether the Bonian Agent contribution is explicitly enabled.

*/

function isBonianAgentEnabled(): boolean {

try {

return globalThis.localStorage?.getItem('workbench.experimental.bonianAgent') === 'true';

} catch {

return false;

}

}

// Bonian Agent

if (isBonianAgentEnabled()) {

void import('./contrib/bonianAgent/browser/bonianAgent.contribution.js');

}

soufianeeloutmani580-ui · 2026-04-12T19:44:09Z

src/vs/workbench/contrib/monacoInput/browser/monacoInputView.ts

+
+		// Simple editor options
+		const editorOptions: IEditorOptions = {
+			minimap: { enabled: false },


M7MDdev1 and others added 6 commits September 6, 2025 18:44

rename: welcome label to AbuCode

94eccf9

edit by appending hello world

286c506

successfully completed the first and second Steps

6913213

Step 3: Core Logic Functional

76cdf32

fixed icons issue

dec5cf6

Adding image upload box & Creating plantUML file

aa6d4d0

Copilot AI review requested due to automatic review settings April 11, 2026 19:51

Copilot started reviewing on behalf of 7t4o April 11, 2026 19:52 View session

Copilot AI reviewed Apr 11, 2026

View reviewed changes

vs-code-engineering bot assigned lszomoru Apr 11, 2026

austindyoung mentioned this pull request Apr 11, 2026

[mirror] microsoft/vscode#309226 Bonian agent austindyoung/vscode-driftfence-mirror-fork#1585

Open

soufianeeloutmani580-ui reviewed Apr 12, 2026

View reviewed changes

lszomoru closed this Apr 13, 2026

	"gulp-azure-storage": "^0.12.1",
	"gulp-azure-storage": "0.12.1",

	const srcPipe = gulp.src(`${src}/**`, { base: `${src}`, encoding: false } as any);
	const srcPipe = gulp.src(`${src}/**`, { base: `${src}`, buffer: true });

		// Bonian Agent
		import './contrib/bonianAgent/browser/bonianAgent.contribution.js';

-// Bonian Agent
-import './contrib/bonianAgent/browser/bonianAgent.contribution.js';
+/**
+ * Returns whether the Bonian Agent contribution is explicitly enabled.
+ */
+function isBonianAgentEnabled(): boolean {
+	try {
+		return globalThis.localStorage?.getItem('workbench.experimental.bonianAgent') === 'true';
+	} catch {
+		return false;
+	}
+}
+// Bonian Agent
+if (isBonianAgentEnabled()) {
+	void import('./contrib/bonianAgent/browser/bonianAgent.contribution.js');
+}

Conversation

7t4o commented Apr 11, 2026

Uh oh!

vs-code-engineering bot commented Apr 11, 2026

📬 CODENOTIFY

@bpasero

@deepak1556

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

soufianeeloutmani580-ui Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants